<template>
  <flex align="center">
    <el-steps
      :active="active"
      align-center
      process-status="finish"
      class="steps-wrapper">
      <el-step
        v-for="(step, index) in stepsList"
        :key="step.value + index"
        :title="step.label" />
    </el-steps>
  </flex>
</template>

<script>

export default {
  props: {
    current: {
      type: String,
      default: ''
    },
    stepsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      active: 0
    }
  },
  watch: {
    current (value) {
      this.active = this.stepsList.findIndex(el => el.value === value)
    }
  }
}
</script>

<style scoped>
.steps-wrapper {
  width: 100%;
  font-size: 12px;
  /* color: #303133; */
}
.steps-wrapper >>> .el-step__title {
  font-size: 12px;
  color: #303133;
}
.steps-wrapper >>> .el-step__line {
  height: 1px;
  top: 8px;
}
.steps-wrapper >>> .el-step__icon {
  width: 16px;
  height: 16px;
  font-size: 12px;
  border: 1px solid;
}
.steps-wrapper >>> .el-step__head.is-finish .el-step__icon {
  color: #FFF;
  border-color: #357DFF;
  background-color: #357DFF;
}
</style>
